<template>
  <div class="basic-param">
    <!--工具条-->
    <el-col :span="24" class="toolbar">
        <el-form :inline="true">
          <el-form-item :label="$t('message.pair-name')">
            <el-select v-model="value" :placeholder="$t('message.select')" size="mini">
              <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('message.time-interval')">
            <el-select v-model="value3" :placeholder="$t('message.select')" size="mini">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('message.trade-limit')">
            <el-input v-model="value4" :placeholder="$t('message.please-enter')" size="mini"></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.max-order-quantity')">
            <el-input v-model="value5" :placeholder="$t('message.please-enter')" size="mini"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-table
        :cell-style="{textAlign: 'center'}"
        :header-cell-style="{textAlign: 'center'}"
        :data="data"
        height="550"
        border
        style="width: 100%">
        <el-table-column
          prop="time"
          :label="$t('message.time')">
        </el-table-column>
        <el-table-column
          prop="bidsLow"
          :label="$t('message.minimal-bid-price')">
          <template slot-scope="scope">
            <input type="text" v-model="scope.row.bidsLow">
          </template>
        </el-table-column>
        <el-table-column
          prop="bidsHigh"
          :label="$t('message.max-bid-price')">
          <template slot-scope="scope">
            <input type="text" v-model="scope.row.bidsHigh">
          </template>
        </el-table-column>
        <el-table-column
          prop="asksLow"
          :label="$t('message.minimal-ask-price')">
          <template slot-scope="scope">
            <input type="text" v-model="scope.row.asksLow">
          </template>
        </el-table-column>
        <el-table-column
          prop="asksHigh"
          :label="$t('message.max-ask-price')">
          <template slot-scope="scope">
            <input type="text" v-model="scope.row.asksHigh">
          </template>
        </el-table-column>
        <el-table-column
          prop="open"
          :label="$t('message.opening-price')">
          <template slot-scope="scope">
            <input type="text" v-model="scope.row.open">
          </template>
        </el-table-column>
        <el-table-column
          prop="close"
          :label="$t('message.closing-price')">
          <template slot-scope="scope">
            <input type="text" v-model="scope.row.close">
          </template>
        </el-table-column>
        <el-table-column
          prop="amountHight"
          :label="$t('message.max-quantity')">
          <template slot-scope="scope">
            <input type="text" v-model="scope.row.amountHight">
          </template>
        </el-table-column>
        <el-table-column
          prop="amountLow"
          :label="$t('message.minamal-quantity')">
          <template slot-scope="scope">
            <input type="text" v-model="scope.row.amountLow">
          </template>
        </el-table-column>
        <el-table-column
          prop="depth"
          :label="$t('message.depth')">
          <template slot-scope="scope">
            <input type="text" v-model="scope.row.depth">
          </template>
        </el-table-column>
        <el-table-column
          prop="frequency"
          :label="$t('message.quote-frequency')">
          <template slot-scope="scope">
            <input type="text" v-model="scope.row.frequency">
          </template>
        </el-table-column>
      </el-table>
    <div class="robot">
      <label for="url">url</label>
      <input id="url" width="200px" v-model="url" :placeholder="$t('message.enter-url')">
      <label for="secret_key">secret_key</label>
      <input id="secret_key" width="200px" v-model="secret_key" :placeholder="$t('message.enter-secret_key')">
      <label for="apiKey">apiKey</label>
      <input id="apiKey" width="200px"  v-model="apiKey" :placeholder="$t('message.enter-apiKey')">
    </div>
    <div class="submit">
      <el-button type="primary" @click="autoEditVisible = true">{{$t('message.automatic-editing')}}</el-button>
      <el-button type="primary" @click="submit">{{$t('message.confirm-and-submit')}}</el-button>
      <!--<el-button type="info">{{$t('message.reset')}}</el-button>-->
    </div>
    <el-alert
      v-if="isError"
      :title="$t('message.tip-15')"
      type="error">
    </el-alert>
    <!--自动编辑-->
    <el-dialog
      :title="$t('message.automatic-editing')"
      :visible.sync="autoEditVisible"
      @closed="autoEditClose">
      <div>
        <table class="detailTable" border="1">
          <tr>
            <td>{{$t('message.start-time')}}</td>
            <td>
              <el-date-picker
                v-model="autoEditList.startTime"
                type="datetime"
                :placeholder="$t('message.select-date&time')">
              </el-date-picker>
            </td>
            <td>{{$t('message.start-price')}}</td>
            <td>
              <input type="text" v-model="autoEditList.basePrice">
            </td>
          </tr>
          <tr>
            <td>{{$t('message.depth')}}</td>
            <td>
              <input type="text" v-model="autoEditList.depth">
            </td>
            <td>{{$t('message.quote-frequency')}}</td>
            <td>
              <input type="text" v-model="autoEditList.frequency">
            </td>
          </tr>
          <tr>
            <td>{{$t('message.minamal-quantity')}}</td>
            <td>
              <input type="text" v-model="autoEditList.amountLow">
            </td>
            <td>{{$t('message.max-quantity')}}</td>
            <td>
              <input type="text" v-model="autoEditList.amountHigh">
            </td>
          </tr>
          <tr>
            <td>卖方深度区间</td>
            <td>
              <input type="text" v-model="autoEditList.askDepthSec">
            </td>
            <td>买方深度区间</td>
            <td>
              <input type="text" v-model="autoEditList.bidDepthSec">
            </td>
          </tr>
          <tr>
            <td>{{$t('message.template-num')}}</td>
            <td>
              <el-select id="select" v-if="modelList" v-model="autoEditList.modelId" :placeholder="$t('message.select')">
                <el-option
                  v-for="(item, idx) in modelList"
                  :key="idx"
                  :label="item.model_id"
                  :value="item.model_id">
                </el-option>
              </el-select>
              <input v-else type="text" v-model="autoEditList.modelId">
            </td>
            <td>{{$t('message.time-interval')}}</td>
            <td>
              <el-select id="select" v-model="autoEditList.period" :placeholder="$t('message.select')">
                <el-option
                  v-for="(item, idx) in [5, 15]"
                  :key="idx"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </td>
          </tr>
        </table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="setAutoEdit" :loading="setAutoEditLoading">{{$t('message.generate-data')}}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { selfSymbolList, addSecRobot, SetNewRobotData } from '../api/api'
import { getTableData } from '../common/js/util'
import { mapActions } from 'vuex'
export default {
  name: 'BasicParam',
  data () {
    return {
      options: [],
      value: '',
      autoEditVisible: false,
      setAutoEditLoading: false,
      options3: [{
        value: 288,
        label: this.$t('message.every-5-mins')
      }, {
        value: 96,
        label: this.$t('message.every-15-mins')
      }, {
        value: 48,
        label: this.$t('message.every-30-mins')
      }, {
        value: 24,
        label: this.$t('message.every-60-mins')
      }],
      value3: '',
      value4: '',
      value5: '',
      tableData: getTableData(60),
      tableData2: getTableData(30),
      tableData3: getTableData(15),
      tableData4: getTableData(5),
      url: '',
      apiKey: '',
      secret_key: '',
      isError: false,
      autoEditList: {
        startTime: '',
        basePrice: '',
        depth: '',
        frequency: '',
        amountLow: '',
        amountHigh: '',
        askDepthSec: '',
        bidDepthSec: '',
        modelId: '',
        period: ''
      },
      modelList: [],
      recData: [],
      isAutoEdit: false
    }
  },
  beforeCreate () {
    selfSymbolList().then((res) => {
      console.log(res)
      if (res.data.code === 0) {
        console.log(1111)
        this.options = res.data.symbols
      }
    })
  },
  beforeMount () {
    this.setModelList().then((res) => {
      console.log(res)
      this.modelList = res || []
    }).catch(() => {
      this.$message.error('模板列表加载出错')
    })
  },
  computed: {
    data () {
      return this.isAutoEdit
        ? this.recData
        : (this.value3 === 24
          ? this.tableData
          : (this.value3 === 48 ? this.tableData2
            : (this.value3 === 96 ? this.tableData3
              : this.tableData4)))
    }
  },
  methods: {
    ...mapActions(['setModelList']),
    submit () {
      // let dataTable = {}
      if (this.value === '') {
        this.$message.error(this.$t('message.tip-35'))
        return
      } else if (this.value3 === '') {
        this.$message.error(this.$t('message.tip-36'))
        return
      } else if (this.value4 === '') {
        this.$message.error(this.$t('message.tip-37'))
        return
      } else if (this.value5 === '') {
        this.$message.error(this.$t('message.tip-38'))
        return
      } else if (this.url === '') {
        this.$message.error(this.$t('message.tip-39'))
        return
      } else if (this.apiKey === '') {
        this.$message.error(this.$t('message.tip-40'))
        return
      } else if (this.secret_key === '') {
        this.$message.error(this.$t('message.tip-41'))
        return
      }
      // if (this.value3 === 24) {
      //   dataTable = this.tableData
      // } else if (this.value3 === 48) {
      //   dataTable = this.tableData2
      // } else {
      //   dataTable = this.tableData3
      // }
      const data = {
        secRobot: {
          section_num: this.value3,
          api_key: this.apiKey,
          secret_key: this.secret_key,
          symbol: this.value,
          url: this.url,
          trade_limit_size_per_min: parseInt(this.value4),
          retain_recods_num: parseInt(this.value5),
          dataTable: this.data
        }
      }
      this.$confirm(this.$t('message.tip-42'), this.$t('message.notification'), {
        confirmButtonText: this.$t('message.confirm'),
        cancelButtonText: this.$t('message.cancel'),
        type: 'warning'
      }).then(() => {
        addSecRobot(data).then((res) => {
          console.log(res)
          if (res.data.code !== 0) {
            this.$message({
              type: 'error',
              message: res.data.error
            })
          } else {
            this.$router.replace('robotList')
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: this.$t('message.tip-43')
          })
        })
        this.$message({
          type: 'success',
          message: this.$t('message.tip-44')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('message.tip-45')
        })
      })
    },
    setAutoEdit () {
      let list = this.autoEditList
      if (list.startTime === '' &&
        list.basePrice === '' &&
        list.depth === '' &&
        list.frequency === '' &&
        list.amountLow === '' &&
        list.amountHigh === '' &&
        list.modelId === '' &&
        list.period === '') {
        this.$message.error(this.$t('message.tip-15'))
      } else {
        let startTime = list.startTime
        list.startTime = (new Date(startTime).getTime() / 1000) + ''
        list.robotId = this.robot_id
        this.setAutoEditLoading = true
        SetNewRobotData(list).then(res => {
          console.log(res)
          this.setAutoEditLoading = false
          if (res.data.code !== 0) {
            res.data.error ? this.$message.error(res.data.error)
              : this.$message.error(this.$t('message.tip-46'))
          } else {
            this.isAutoEdit = true
            let changeData = []
            let list = res.data.data
            let listLength = list.length
            list.forEach((item, idx) => {
              let arr = listLength === 24
                ? getTableData(60)
                : (listLength === 48 ? getTableData(30)
                  : (listLength === 96 ? getTableData(15)
                    : getTableData(5)))
              item.time = arr[idx].time
              changeData.push(item)
            })
            this.recData = changeData
            this.autoEditVisible = false
          }
        })
      }
    },
    autoEditClose () {
      this.setAutoEditLoading = false
    }
  }
}
</script>

<style scoped lang="scss">
  .timeData {
    border: 1px solid #ebeef5;
    .grid-content {
      text-align: center;
      height: 50px;
      line-height: 50px;
      .table-line {
        .el-row {
          border-top: 1px solid #ebeef5;
          .el-col {
            border: 1px solid #ebeef5;
            .grid-content {
              text-align: center;
              input {
                width: 80px;
                height: 30px;
                font-size: 18px;
                border: none;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
  .input {
    font-size: 20px;
    width: 100px;
    border: none;
    text-align: center;
  }
  .cell {
    text-align: center;
  }
  .robot {
    padding: 10px;
    border: 1px solid #ebeef5;
    margin-top: 30px;
    label {
      margin-left: 50px;
      margin-right: 10px;
    }
    input {
      padding-left: 10px;
      width: 200px;
      height: 30px;
      border-radius: 3px;
      border: 1px solid #ebeef5;
    }
  }
  .submit {
    text-align: center;
    padding-top: 20px;
  }
  .el-table {
    td {
      input {
        border: none;
        width: 100px;
        text-align: center;
      }
      padding: 0;
    }
  }
</style>
